<template>
  <div>
    <div class="panel panel-default" >
      <div class="panel-heading">
        <span>数据展示</span>
        <el-button class="pull-right" size="small" type="text" style="padding: 0;" @click="showJson" >JSON</el-button>
      </div>
      <div class="panel-body">
        <div class="key-info" v-if="keyRow.key">
          <div class="text text-more" :title="keyRow.key" >
            <el-button size="small" icon="el-icon-document-copy" type="text" @click="copyKey(keyRow.key,$event)"  class="margin-right"/>
            <span>{{keyRow.key}} </span>
          </div>
          <div class="margin-bottom">
            <span>数据量: {{keyRow.length}}</span>
            <span class="margin-left margin-right">类型: {{keyRow.type}}</span>
            <el-checkbox v-model="input.all" @change="loadAllData">所有数据</el-checkbox>
          </div>
        </div>

        <template v-if="keyRow.type === 'string'">
          <string ref="loadData_string" :conn-param="connParam" :key-obj="keyRow" :serializer-param="serializerParam" />
        </template>
        <template v-if="keyRow.type === 'hash'">
          <hash ref="loadData_hash" :conn-param="connParam" :key-obj="keyRow" :serializer-param="serializerParam"/>
        </template>
        <template v-if="keyRow.type === 'list'">
          <list ref="loadData_list" :conn-param="connParam" :key-obj="keyRow" :serializer-param="serializerParam" :all="input.all"/>
        </template>
        <template v-if="keyRow.type === 'set'">
          <set ref="loadData_set" :conn-param="connParam" :key-obj="keyRow" :serializer-param="serializerParam" :all="input.all" />
        </template>
        <template v-if="keyRow.type === 'zset'">
          <zset ref="loadData_zset" :conn-param="connParam" :key-obj="keyRow" :serializer-param="serializerParam" :all="input.all"/>
        </template>
      </div>
    </div>

    <!-- json 格式化展示 -->
    <el-drawer
      :with-header="false"
      :visible.sync="drawer.visible"
      direction="rtl"
    >
      <json-editor :json="drawer.json"/>
    </el-drawer>
  </div>
</template>

<script>
import redis from "@/api/redis";
import string from "@/views/monitor/redis/type/string";
import list from "@/views/monitor/redis/type/list";
import set from "@/views/monitor/redis/type/set";
import hash from "@/views/monitor/redis/type/hash";
import zset from "@/views/monitor/redis/type/zset";
import clip from "@/utils/clipboard";
import JsonEditor from '@/components/JsonEditor'

export default {
  name: "datashow",
  components: {JsonEditor,string,list,set,hash,zset},
  props: {
    keyRow: {
      type: Object,
      required: true
    },
    connParam: {
      type : Object,
      required: true
    },
    serializerParam: {
      type : Object,
      required: true
    }
  },
  data(){
    return {
      input: {all: false},
      drawer: {
        visible: false,
        json: null
      }
    }
  },
  methods: {
    showJson(){
      if (this.keyRow.key){
        let component = this.$refs['loadData_'+this.keyRow.type];
        let data = component.getData();
        try{
          if (typeof(data) === 'object'){
            this.drawer.json = data
          }else{
            this.drawer.json = JSON.parse(data);
          }

          this.drawer.visible = true;
        }catch (e) {
          this.$message(e.toString());
          console.log(data)
        }
      }
    },
    copyKey(text, event){
      clip(text, event)
    },
    loadAllData(){
      if (this.keyRow.key && this.keyRow.type){
        this.$nextTick(() => {
          let component = this.$refs['loadData_'+this.keyRow.type];
          if (component){
            component.loadData();
          }
        })
      }
    }
  },
  watch: {
    keyRow: {
      deep: true,
      handler(val,oldVal){
        this.loadAllData();
      }
    }
  }
}
</script>

<style scoped>

</style>
